<template>
  <div class="ele-body department">
    <div class="branch">
      <div class="branch-search">
        <el-input size="small" placeholder="请输入查询名称" v-model="filterText"/>
        <el-button type="primary" @click="createDepartment" v-if="power.create">添加部门</el-button>
      </div>
      <el-scrollbar class="tree-wrapper-scroll">
        <el-tree
          node-key="id"
          ref="department"
          :data="department"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="changeTreeNode"
          :filter-node-method="filterNode"
          :props="{children: 'children', label: 'Name'}">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label}}</span>
              <span class="tree-node-setup">
                <i class="el-icon-circle-plus" @click.stop="createDepartment(data)" v-if="power.create"></i>
                <i class="el-icon-edit" @click.stop="editDepartment(data)" v-if="power.update"></i>
              </span>
            </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="staff">
      <div class="staff-search">
        <el-form :inline="true" :model="query" :size="defaultFormSize" class="fl">
          <el-form-item>
            <el-input clearable @clear="reload" class="width140px" v-model="query.StaffName" placeholder="姓名"/>
          </el-form-item>
          <el-form-item>
            <el-input clearable @clear="reload" class="width140px" v-model="query.Mobile" placeholder="手机号"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="query.Gender" placeholder="请选择性别" class="width120px" @change="reload">
              <el-option v-for="item in gender" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">
              查询
            </el-button>
            <el-button type="primary" class="ele-btn-icon" @click="resetReload">
              全部员工
            </el-button>
          </el-form-item>
        </el-form>
        <div class="fr">
          <el-button type="primary" @click="saveStaff(false)" v-if="power.createStaff">添加员工</el-button>
        </div>
      </div>
      <ele-pro-table
        ref="table"
        :toolbar="null"
        row-key="StaffID"
        :datasource="url"
        :where="query"
        :columns="columns"
        :request="defaultTableRequest"
        :response="defaultTableResponse">
        <template slot="action" slot-scope="{row}">
          <template v-if="power.groupAuth.action">
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="saveStaff(row)"
                     v-if="power.updateStaff">
              编辑
            </el-link>
            <el-link type="primary" :underline="false" icon="el-icon-user" @click="loginAccount(row)"
                     :disabled="Number(row.UserID) > 0" v-if="power.relation">
              登录账号
            </el-link>
            <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="deleteStaff(row)" v-if="power.deleteStaff">
              <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </el-popconfirm>
          </template>
          <template v-else>---</template>
        </template>
      </ele-pro-table>
    </div>
    <login-account v-if="showLoginAccount" :visible.sync="showLoginAccount" :staff-id="current.StaffID" @done="reload"/>
    <save-staff :visible.sync="showEditStaff" :data="current" :department="department" @done="reload"/>
    <save-department :visible.sync="showEdit" :data="current" :department="department" @done="loadDepartmentList"/>
  </div>
</template>

<script>
  import SaveDepartment from './save'
  import SaveStaff from './save-staff'
  import LoginAccount from './login-account'
  import columns from '@/config/columns/department/staff'
  import {downConstantList} from "@/utils/common";

  export default {
    name: "department-index",
    components: {
      SaveStaff,
      LoginAccount,
      SaveDepartment
    },
    data() {
      return {
        query: {
          Mobile: '',
          Gender: ''
        }, // 员工列表搜索条件
        url: '/staff', // 员工列表加载地址
        columns, // 表格列表定义
        filterText: '', // 名称搜索
        showEdit: false, // 是否显示添加、编辑部门弹窗
        showEditStaff: false, // 是否显示添加、编辑员工弹窗
        showLoginAccount: false, // 是否显示关联账户弹窗
        current: {}, // 当前编辑数据
        department: [],
        gender: downConstantList('Sex', ''),// 性别
        power: {}, // 权限
      }
    },
    watch: {
      filterText(val) {
        this.$refs.department.filter(val);
      },
    },
    created() {
      this.loadDepartmentList()
      let auth = {
        create: 'department:create',
        update: 'department:update',
        delete: 'department:delete',
        createStaff: 'staff:create',
        updateStaff: 'staff:update',
        deleteStaff: 'staff:delete',
        relation: 'staff:relation'
      };
      this.power = this.$roleListPermission(auth, {
        action: ['updateStaff', 'deleteStaff', 'relation']
      })
      console.log(this.power)
    },
    methods: {
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload();
      },
      /* 刷新表格 */
      resetReload() {
        this.query = {}
        this.$nextTick(() => {
          this.reload();
        })
      },
      // 加载部门列表
      loadDepartmentList() {
        this.$http.get('/department').then(res => {
          if (res.data.code === 200) {
            this.department = res.data.result;
          }
        })
      },
      // 部门目录选择
      changeTreeNode(row) {
        this.query.DepartmentID = row.DepartmentID
        this.reload()
      },
      // 文件目录搜索过滤
      filterNode(value, data) {
        if (!value) return true
        return data.Name.indexOf(value) !== -1
      },
      // 添加部门
      createDepartment(node = false) {
        this.current = node ? {ParentID: node.DepartmentID} : {}
        this.showEdit = true
      },
      // 编辑部门
      editDepartment(node) {
        this.current = {
          Name: node.Name,
          ParentID: node.ParentID,
          DepartmentID: node.DepartmentID
        }
        this.showEdit = true
      },
      // 添加编辑员工
      saveStaff(row = false) {
        this.current = row ? row : (this.query.DepartmentID ? {
          DepartmentID: this.query.DepartmentID
        } : {})
        this.showEditStaff = true;
      },
      // 移除员工
      deleteStaff(row) {
        this.$http.post('/staff/delete', {StaffID: row.StaffID}).then(res => {
          if (res.data.code === 200) {
            this.$message.success('当前员工已删除')
            this.reload()
          }
        })
      },
      // 关联登录账户
      loginAccount(row) {
        this.current.StaffID = Number(row.StaffID)
        this.showLoginAccount = true
      }
    }
  }
</script>

<style lang="scss">
  .el-tree-node__content:hover .tree-node-setup {
    display: block !important;
  }

  .department {
    height: calc(100% - 30px);

    .branch, .staff {
      height: calc(100% - 30px);
      padding: 15px;
    }

    .branch {
      width: 260px;
      float: left;
      border-right: 1px solid #ddd;
      background: #fff;

      .el-tree-node {
        margin: 2px 0;
      }

      .branch-search {
        padding-bottom: 15px;

        .el-input--small {
          width: 170px;

          .el-input__inner {
            height: 28px !important;
            line-height: 28px !important;
          }
        }

        .el-button {
          float: right;
        }
      }

      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;

        .tree-node-setup {
          display: none;

          i {
            font-size: 18px;
            color: #409eff;
          }

          i:last-child {
            margin-left: 10px;
          }
        }
      }
    }

    .staff {
      background: #fff;
      margin-left: 290px;

      .staff-search {
        overflow: hidden;
      }
    }
  }
</style>
